<template>
  <div  class="analyse" ww3 auto>
    <div class="analyse-wap1">
      <el-page-header @back="goBack" content="作品转化分析">
      </el-page-header>
    </div>

    <el-card class="box-card">

      <p fz-14 class="card-tit">
        <span>标题：男人下班一个人路上</span>
        <span style="margin-left: 2%">编号：6540528</span>
      </p>

      <p fz-14 class="card-bar">
        用户在搜索以下关键词时，该作品被点击和下载的情况（统计结果不含低频关键词）
      </p>

      <dl class="card-info" flex flex-c fz-16>
        <dt flex flex-c ww1>
        <span>搜索词</span>
        <span>点击数</span>
        <span>下载数</span>
        <span>转化率</span>
        </dt>
        
        <dd flex flex-c ww1>
          <span>一个人走路</span>
          <span>4</span>
          <span>2</span>
          <span>1%</span>
        </dd>

      </dl>



    </el-card>



  </div>
</template>

<script>
export default {
  name: "Analyse",

  methods: {
    goBack() {
      this.$router.go(-1)
    }
  }


}
</script>

<style scoped>
.box-card{
  color: #555;
  padding: 2% 6%;
  margin-top: 2%;
  min-height: 60vh;
}
.card-bar{
  padding: 2% 0;
  border-bottom: 1px solid #ecedee;
}
.box-card .card-bar:before{
  background: #03d5b2;

}
.card-info{
  flex-direction: column;
}
.card-info dt, .card-info dd{
  justify-content: center;
}
.card-info dt span{

}


.card-info span{
  flex:  0 0 160px;
  text-align: center;
  padding-top: 3%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>